﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>坂田文明交通挑战赛</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link href="images/index.css?v=10" rel="stylesheet" type="text/css" />
    <link href="images/animation.css" rel="stylesheet" type="text/css" />

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js"></script>

    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>

    <script src="js/index.js?v=10"></script>
</head>
<body>
<div id="loading">
    <img src="images/loding.png" width="100%"> <span>正在加载请稍后...</span>
</div>

<div id="page" style="display: none;">
    <a class="back" @click="backChoice()" v-if="choiceItemStep > 1">返回</a>

    <div class="codeTime" v-if="step == 'answer'">
        距离答题结束还有<span>{{ time.one }}</span><span>{{ time.two }}</span><span>{{ time.thr }}</span>秒
    </div>
    <div class="box" v-if="!step">
        <div class="bjA">
            <div class="bnt" @click="setStep('choice')"><span>点击屏幕继续</span></div>
            <div class="fmb">
                <h1><img src="images/ioc.png"></h1>
                <ul class="fmb">
                    <li>关注“科技坂田”微信公众号</li>
                    <li>答题人需选填自己所在单位信息</li>
                    <li>进入答题页面，开始答题</li>
                    <li>答题时间为200秒，超过200秒则自动提交答题结果并计算得分。</li>
                    <li>每人每天有两次答题机会</li>
                    <li>挑战赛时间：2018年5月14日-2018年6月1日</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="box animated fadeIn" v-if="step == 'choice'">
        <div class="bjA">
            <div class="danwei fm">
                <h1>请选择您所在的{{ itemName }}</h1>
                <div class="title"><span><b>{{ itemName }}</b></span><span><b>参与答题人数</b></span></div>
                <ul class="choice">
                    <li v-for="(item, index) in items" @click="choiceItem(item,index)"><span>{{ item.levelname }}</span><span class="red">{{ item.number }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <div class="box animated fadeIn" v-if="step == 'answer'">
        <div class="bjA" style="padding-top: 100px;">
            <div class="dati">
                <h3>{{ currentIndex+1 }}. {{ ques[currentIndex].title }}</h3>
                <ul>
                    <li v-for="(item,index) in ques[currentIndex].answer" @click="choiceAnswer(index)">
                        <input type="radio" :value="index" v-model="ques[currentIndex].choice" hidden>
                        <i :class="{'true' : ques[currentIndex].choice===index}"></i>{{ item }}
                    </li>
                </ul>
                <div class="bntb" @click="nextQues()">进入下一题</div>
            </div>
        </div>
    </div>

    <div class="end animated fadeIn" v-if="step == 'complete'">
        <img src="images/ioc.png">
        <ul>
            <h1>得分 : {{ replyNum*10 }}分</h1>
            <h2>{{ replyNum>=6?'恭喜您挑战成功！':'很遗憾挑战失败！' }}</h2>
            <h3>{{ user.name }}</h3>
            <li><p v-for="item in choiceNames">{{item}}</p></li>
            <li>您本次考试一共答对<span>{{ replyNum }}</span>题 所用时间:<span>{{ time.lave }}</span>秒</li>
            <a class="bntb" @click="isShowError(true)" v-if="isShowErrorBtn">查看错题</a>
            <a class="bntb" style="margin-top: 10px;" @click="location.reload()">再来一次</a>
            <div class="bntc" @click="share(true)">保存到手机</div>
        </ul>
    </div>

    <div class="error animated fadeIn" v-show="error.isShow">
        <ul>
            <li v-for="(list, index) in error.lists">
                <div class="tit"><b>错题{{ NUM[index] }}：</b>{{ list.title }}</div>
                <dt class="cont">
                <dd v-for="(item, i) in list.answer" :class="{'true':ABC[i]==list.correct}">{{ABC[i]==list.correct?'正确答案':'错误答案'}}：{{ ABC[i] }}. {{item}}</dd>
                </dt>
            </li>
            <li class="return" @click="isShowError()">返回</li>
        </ul>

    </div>

    <div class="share animated fadeIn" @click="share()" v-if="isShare">
        <img :src="shareImg" alt="">
    </div>

    <div class="down animated fadeIn" v-show="isDown">
        <img src="images/down.gif" alt="">
    </div>

    <div class="user-box animated fadeIn" v-show="user.isShow">
        <div class="conver"></div>
        <div class="cont">
            <button class="close" @click="user.isShow=false">×</button>
            <label>请填写您的姓名</label>
            <input type="text" v-model="user.name">
            <button class="next" type="button" @click="startAnswer()">下一步</button>
        </div>
    </div>

</div>
<script src="js/config.js"></script>
<script src="js/app.js"></script>
</body>
</html>